<template>
  <div class="adminList-wrap">
    <el-input
        style="width: 340px; margin-top: 10px; margin-bottom: 30px"
        v-model="searchInput"
        size="large"
        placeholder="请输入搜索内容"
        :prefix-icon="Search"
        clearable
        @input="fnInput"
    />
    <el-table
        :data="datas"
        border
        style="width: 100%"
        :header-cell-style="{ background: '#f5f5f5', color: '#606266' }"
    >
      <!-- <el-table-column
          type="selection"
          width="55"
          align="center"
          fixed="left"
      /> -->
      <el-table-column label="应用名称" min-width="60" align="center">
        <template #default="scope">{{
            scope.row.app_id ? scope.row.app_id : '-'
          }}</template>
      </el-table-column>
      <el-table-column label="访问IP" min-width="130" align="center">
        <template #default="scope">{{
            scope.row.from_ip ? scope.row.from_ip : '-'
          }}</template>
      </el-table-column>
      <el-table-column label="API" min-width="60" align="center">
        <template #default="scope">{{
            scope.row.api ? scope.row.api : '-'
          }}</template>
      </el-table-column>
      <el-table-column label="API描述" min-width="140" align="center">
        <template #default="scope">{{
            scope.row.api_desc ? scope.row.api_desc : '-'
          }}</template>
      </el-table-column>
      <el-table-column label="访问动作记录" min-width="260" align="center">
        <template #default="scope">
          <el-tooltip
              popper-class="code-box-item"
              effect="dark"
              :content="scope.row.do_what"
              placement="top"
          >
            <div class="txt">
              {{ scope.row.do_what ? scope.row.do_what : '-' }}
            </div>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="结果" min-width="60" align="center">
        <template #default="scope">{{ scope.row.error_code }}</template>
      </el-table-column>
      <el-table-column label="操作时间" min-width="100" align="center">
        <template #default="scope">{{ scope.row.created_time }}</template>
      </el-table-column>
    </el-table>

    <!--分页-->
    <el-pagination
        class="page-warp"
        background
        layout="total,prev, pager, next, sizes"
        v-model:page-size="pageSize"
        :total="total"
        :page-sizes="[10, 20, 30, 40]"
        :current-page="currentPage"
        @current-change="fnCurrentChange"
        @size-change="fnSizeChange"
    />
  </div>
</template>

<script setup>
import { reactive, ref, onMounted, watch } from 'vue'
import { useRouter } from 'vue-router'
import { postData } from '@/http/request.js'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus, Search } from '@element-plus/icons-vue'
let router = useRouter()

let datas = ref([])
let res_datas = ref([])

let total = ref(0)
let currentPage = ref(1)
let pageSize = ref(10)
let searchInput = ref('')
let totalCount = ref(0)

//init
let getList = () => {
  postData(
      '/dev/app/operation/list',
      {
        page: currentPage.value,
        page_num: pageSize.value,
      },
      {
        timeout: 120000,
      }
  )
      .then((res) => {
        if (res.code == 0) {
          total.value = res?.datas?.total_count || 0
          totalCount.value = res?.datas?.total_count || 0
          res_datas.value = res?.datas?.operations || []
          datas.value = res?.datas?.operations || []
        } else if (res.code == -56055) {
          return
        } else {
          ElMessage({
            type: 'error',
            message: 'error',
          })
        }
      })
      .catch((res) => {
        ElMessage({
          type: 'error',
          message: 'error',
        })
      })
}

let fnSizeChange = (data) => {
  pageSize.value = data
  currentPage.value = 1
  getList()
}

let fnCurrentChange = (data) => {
  currentPage.value = data
  getList()
}

//search
let fnInput = (val) => {
  if (val) {
    // datas.value = datas.value.filter((item) => {
    //   return item.dev_id.includes(val)
    // })
    datas.value = datas.value.filter((item) => {
      return Object.keys(item).some((key) => {
        return String(item[key]).toLowerCase().indexOf(val) > -1
      })
    })
  } else {
    getList()
  }
  currentPage.value = 1
  total.value = datas.value.length
}

onMounted(() => {
  getList()
})
</script>

<style scoped>
.adminList-wrap {
  width: 100%;
  height: 100%;
  position: relative;
}
.search-wrap {
  display: flex;
  justify-content: flex-start;
}

.adminList-wrap >>> .el-table__header-wrapper {
  background: red;
}
.adminList-wrap >>> .el-table__header {
  background: red;
}
.page-warp {
  float: right;
  margin-top: 10px;
}
.txt {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
</style>
